<!-- 流程图组件 -->
<template>
  <div ref="container" class="flow-chart-container"></div>
</template>

<script>
import { Graph } from '@antv/x6';
import { defineComponent, onMounted, ref } from 'vue';

export default defineComponent({
  name: 'FlowChart',
  setup() {
    const container = ref(null);
    
    onMounted(() => {
      const graph = new Graph({
        container: container.value,
        width: 800,
        height: 600,
        grid: true,
      });
      
      // Add sample nodes and edges
      const node1 = graph.addNode({
        x: 100,
        y: 100,
        width: 80,
        height: 40,
        label: 'Node 1',
      });
      
      const node2 = graph.addNode({
        x: 300,
        y: 100,
        width: 80,
        height: 40,
        label: 'Node 2',
      });
      
      graph.addEdge({
        source: node1,
        target: node2,
      });
    });
    
    return { container };
  },
});
</script>

<style scoped>
.flow-chart-container {
  width: 100%;
  height: 100%;
  border: 1px solid #f0f0f0;
}
</style> 